<style>
    .select-label{
        display: inline-block;height: 30px;
        outline: none;
        font-size: 12px;
        min-width: 100px;
        line-height: 30px;
        position: relative;
        padding: 0 30px 0 10px;
        vertical-align: middle;
        color: #108cee;
        background-color: #eaf6fe;
        border: 1px solid #eaf6fe;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        transition: all .3s;
        cursor: pointer;
    }
    .select-list{
        list-style: none;
        padding: 0;
        display: none;;
        max-width: 100px;
        position: absolute;
        width: 100px;
        background: #FFF;
        left: 0;    border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 5px 9px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 5px 9px rgba(0,0,0,0.2);
        box-shadow: 0px 5px 9px rgba(0,0,0,0.2);
    }
    .select-list li{cursor: pointer;}
    .select-list li:hover{background: #eaf6fe;}
    .select-list li:hover .select-item,.select-list li.active .select-item{color: #108cee;}
    .select-item{
        padding: 0 10px;line-height: 30px;
    }
</style>
<span  tabindex="1" hidefocus="true" class="select-com" style="position: relative;">
    <span tabindex="1" hidefocus="true" class="select-label no-selected">全部类型</span>
    <ol tabindex="1" hidefocus="true" class="select-list">
        <li class="active" tabindex="1" hidefocus="true"><span class="select-item no-selected">全部类型</span></li>
        <li tabindex="1" hidefocus="true"><span class="select-item no-selected">通知</span></li>
        <li tabindex="1" hidefocus="true"><span class="select-item no-selected">公告</span></li>
        <li tabindex="1" hidefocus="true"><span class="select-item no-selected">工单信息</span></li>
        <li tabindex="1" hidefocus="true"><span class="select-item no-selected">产品服务</span></li>
    </ol>
</span>
<script>
    $(function () {
        var $select = $('.select-com');
        $select.find('.select-label').click(function () {
            $(this).siblings('.select-list').show();
        }).blur(function () {
            $(this).siblings('.select-list').hide();
        })

    })
</script>